<script setup>

import ArrowButton from '@/components/ArrowButton.vue'
import { EditPen } from '@element-plus/icons-vue'
import QAItem from '@/components/QAItem.vue'
import { useRouter } from 'vue-router'
import QAForm from '@/components/QAForm.vue'
import { ref } from 'vue'

const router = useRouter()
const onClickMore = () => {
  router.push('/QA')
}
/*发布问题*/
const handleCancel = () => {
}
const handleConfirm = (question) => {
  console.log('问题：', question)
  //TODO 发送请求
  ElMessage.success('提交成功')
}
const qaForm = ref()
const openQA = () => {
  qaForm.value.QADialog = true
}
</script>

<template>
  <div class="QA">
    <div class="title">
      <h3>在线问答 <span style="font-size: 12px;font-weight: 500">分享与讨论，专家坐镇</span></h3>
      <div class="title-right">
        <el-button icon="EditPen" color="#39c5bb" plain round size="small" @click="openQA">发布问题</el-button>
        <ArrowButton @click="onClickMore"></ArrowButton>
      </div>
    </div>
    <div class="content">
      <div class="content-left">
        <QAItem></QAItem>
      </div>
      <div class="content-right">
        <div style="display: flex;align-items: center;gap: 10px;font-size: 18px">
          <span style="width: 5px;height: 20px;border-radius: 3px;background-color:#39c5bb;"></span>
          热门推荐
        </div>
        <div v-for="(item,index) in 3" style="display: flex;flex-direction: column;gap: 10px;padding-left: 20px">
          <div style="font-size: 14px;font-weight: bold">问题{{ item }}</div>
          <div style="font-size: 12px">
            回答{{ item }}
          </div>
        </div>
      </div>
    </div>
  </div>
  <QAForm ref="qaForm" @cancel="handleCancel" @confirm="handleConfirm"></QAForm>
</template>

<style lang="scss" scoped>
.QA {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;

  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }

  .content {
    width: 100%;
    min-height: 200px;
    border-radius: 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    gap: 30px;

    &-left {
      flex: 4;
      background-color: #fff;
    }

    &-right {
      flex: 1;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 10px;
    }
  }
}
</style>